<script setup>
import { reactive, ref } from 'vue';
import { useListAsync } from '../../../swy-hook/getList.js'
import addForm from "./addForm.vue";
import { delcateApi } from '../../../api/cate'
import { ElMessage } from "element-plus";

const addRef = ref();
const { getList, list, count } = useListAsync()
const queryData = reactive({
  pageSize: 10,
  current: 1
})
onMounted(() => {
  getList('/content/cate', queryData)
});
// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  getList('/content/cate', queryData)
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  getList('/content/cate', queryData)
};
// --------------------------------修改功能------
const editRow = (id) => {
  addRef.value.replyData(id);
  getList('/content/cate', queryData)
};
// --------------------------------删除功能------
const delRow = async (id) => {
  await delcateApi(id)
  ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--
  getList('/content/cate', queryData)
}
</script>

<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">咨询分类</b> 对于文章的进行的相关分类</p>
    <el-card>
      <!-- 搜索区域 -->
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.isShow = true">新增分类</el-button>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" border stripe style="width: 100%">
        <el-table-column type="index" label="ID" width="100px"></el-table-column>
        <el-table-column prop="catename" align="center" label="分类名" width="600px"></el-table-column>
        <el-table-column label="操作" align="center" width="500px">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="text">编辑</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination style="float: right;" @size-change="sizeChange" @current-change="currentChange"
        v-model:current-page="queryData.current" v-model:page-size="queryData.pageSize"
        layout="total, prev, pager, next" :total="count" background>
      </el-pagination>
      <br>
      <br>
      <!-- 新增修改组件 -->
      <addForm ref="addRef" @updateList=" getList('/content/cate', queryData)"></addForm>
    </el-card>
  </div>
  <!-- 底部区域 -->
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>

<style scoped></style>